<template>
  <el-menu-item index="6" @click="handleRelease">发布公告</el-menu-item>
  <el-dialog class="notic-dialog" v-model="dialogTableVisible" title="公告信息">
    <span style="padding-left: 20px; font-size: 20px; padding: 20px"
      >发布公告的区域与物业电话</span
    >
    <div style="border: 1px solid #dcdfe6; margin: 20px">
      <el-table :data="data">
        <el-table-column property="AttValue[4]" label="区域名称" width="240" />
        <el-table-column property="AttValue[5]" label="物业电话" width="240" />
      </el-table>
    </div>
    <el-divider />
    <div style="margin: 20px">
      <span style="padding-left: 20px">公告信息</span>
      <el-input
        v-model="textarea"
        :rows="2"
        type="textarea"
        placeholder="您好！xxx道路近期维修"
      />
    </div>
    <el-divider />
    <span class="dialog-footer">
      <el-button @click="handleSub(user_id)">确定</el-button>
      <el-button type="primary" @click="dialogTableVisible = false">
        取消
      </el-button>
    </span>
    <el-divider />
  </el-dialog>
</template>

<script setup>
import { onMounted } from 'vue'
import { releasenotice } from './hooks/releasenotice'
const map = ref()

const $route = useRoute()
const user_id = ref()

onMounted(() => {
  map.value = useGlobalMap()
  const res = $route.query
  user_id.value = res.id
})
const { handleRelease, dialogTableVisible, data, handleSub, textarea } =
  releasenotice(map)
</script>

<style>
.notic-dialog {
  max-width: 500px;
  min-width: 500px;
}
</style>
<style scoped>
@import url('./style/Announce.css');
</style>
